<template>
  <div>
    <s-breadcrumb></s-breadcrumb>
    <el-card>
      <!-- 搜索区 -->
      <el-form  ref="refresh_ref" :model="query_info" :rules="refresh_rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="商品名称" prop="key">
              <el-input placeholder="请输入商品名称" maxlength="50" clearable show-word-limit v-model="query_info.product_name"  @clear="get_list()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="收货人名称" prop="product_name">
              <el-input placeholder="请输入收货人名称" maxlength="30" clearable show-word-limit v-model="query_info.key"  @clear="get_list()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="收件人手机" prop="user_phone">
              <el-input placeholder="请输入收件人手机" maxlength="30" clearable show-word-limit v-model="query_info.user_phone"  @clear="get_list()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="订单号" prop="user_phone">
              <el-input placeholder="请输入订单号" maxlength="100" clearable show-word-limit v-model="query_info.order_no"  @clear="get_list()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="发货时间" prop="delivery_time">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="query_info.delivery_time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="primary" @click="get_list()">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="refresh()">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="outTab()">导出数据</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="list" border id="out-table">
        <el-table-column align="center" label="编号" prop="id" width="80" fixed="left" sortable></el-table-column>
         <el-table-column align="center" label="商品名称" prop="product_to.name" width="200"></el-table-column>
         <el-table-column align="center" label="规格" prop="specs" width="150"></el-table-column>
         <el-table-column align="center" label="数量" prop="num" width="200"></el-table-column>
         <el-table-column align="center" label="收货人名称" prop="order_to.user_name" width="150"></el-table-column>
        <el-table-column align="center" label="收件人手机" prop="order_to.user_phone" width="150"></el-table-column>
        <el-table-column align="center" label="收件人地址" prop="order_to.user_address" width="200"></el-table-column>
        <el-table-column align="center" label="发货时间" prop="order_to.delivery_time" width="200" sortable></el-table-column>

        <el-table-column align="center" label="备注" prop="order_to.comment" width="200" sortable></el-table-column>
        <el-table-column align="center" label="订单号" prop="order_to.order_no" width="200" sortable></el-table-column>
        <el-table-column align="center" label="单价" prop="money" width="100" sortable></el-table-column>
        <el-table-column align="center" label="邮费" prop="postage" width="100" sortable></el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination @size-change="handle_size_change" @current-change="handle_current_change" :total="total" :layout="layout" :current-page="query_info.page" :page-sizes="page_sizes" :page-size="query_info.pagesize"></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      percentage_width: this.$config.percentage_width, // 弹框的宽度
      page_sizes: this.$config.page_sizes, // 分页条数列表
      layout: this.$config.layout, // 表格分页组件配置
      query_info: {
        key: '', // 收货人名称
        user_phone: '', // 收件人手机
        product_name: '', // 商品名称
        order_no: '', // 订单号
        delivery_time: [], // 发货时间
        page: this.$config.page, // 当前页码
        pagesize: this.$config.pagesize// 每页显示条数
      },
      list: [], // 列表数据
      total: 0, // 总数据条数
      refresh_rules: { key: [], product_name: [], user_phone: [], order_no: [], delivery_time: [] }
    }
  },
  created () {
    this.get_list()
  },
  methods: {
    // 获取列表
    get_list () {
      this.$base.request({
        that: this,
        url: 'shop/shipped_order/index',
        data: this.query_info
      }, (res) => {
        if (res.code === 8888) {
          this.list = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 刷新
    refresh () {
      this.$refs.refresh_ref.resetFields()
      this.get_list()
    },
    // 当前每页多少条选择
    handle_size_change (pagesize) {
      this.query_info.pagesize = pagesize
      this.get_list()
    },
    // 当前页码
    handle_current_change (page) {
      this.query_info.page = page
      this.get_list()
    },
    outTab () {
      /* generate workbook object from table */
      const fix = document.querySelector('.el-table__fixed')
      let wb
      if (fix) {
        wb = this.$XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix))
        document.querySelector('#out-table').appendChild(fix)
      } else {
        wb = this.$XLSX.utils.table_to_book(document.querySelector('#out-table'))
      }
      /* get binary string as output */
      const wbout = this.$XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })

      try {
        this.$FileSaver.saveAs(new Blob([wbout], {
          type: 'application/octet-stream'
        }), '已发货订单.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }
  }
}
</script>
